<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="format-detection" content="telephone=no">
    <title>chat</title>
    <link rel="stylesheet" href="../plugin/seedsui/seedsui.min.css">
    
</head>

<body>
    <section id="page_chat" class="active">
        <header>
            <div class="titlebar">
                <a href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
                <h1>产品部讨论群</h1>
            </div>
        </header>
        <article style="bottom:47px;">
            <ul class="chat" id="chat">
                <li>
                    <div class="author">
                        <img src="../img/list/photo.png" alt="male">
                    </div>
                    <div class="content-box">
                        <div class="content">
                            <i>张三</i>
                            <p>Hello!<span data-emoji="[weixiao]"></span></p>
                        </div>
                    </div>
                </li>
                <li class="even">
                    <div class="author">
                        <img src="../img/list/photo.png" alt="Female">
                    </div>
                    <div class="content-box">
                        <div class="content">
                            <p>啥？你说滴是啥？那啥啥啥东西啊？咋看不懂啊，你说滴到底是个啥？</p>
                        </div>
                    </div>
                </li>
            </ul>
        </article>
        <footer>
            <!--底部富文本输入框-->
            <figure id="richeditor" class="richedit">
                <!--轮播-->
                <div class="slider-container emoji">
                    <div class="slider-wrapper">
                    <div class="slider-slide">
                        <a data-emoji="[weixiao]" alt="[微笑]"></a>
                        <a data-emoji="[nanguo]" alt="[难过]"></a>
                        <a data-emoji="[se]" alt="[色]"></a>
                        <a data-emoji="[fadai]" alt="[发呆]"></a>
                        <a data-emoji="[cool]" alt="[酷]"></a>
                        <a data-emoji="[daku]" alt="[大哭]"></a>
                        <a data-emoji="[haixiu]" alt="[害羞]"></a>
                        
                        <a data-emoji="[bizui]" alt="[闭嘴]"></a>
                        <a data-emoji="[shuijiao]" alt="[睡觉]"></a>
                        <a data-emoji="[ku]" alt="[哭]"></a>
                        <a data-emoji="[liuhan]" alt="[流汗]"></a>
                        <a data-emoji="[fanu]" alt="[发怒]"></a>
                        <a data-emoji="[zhayan]" alt="[眨眼]"></a>
                        <a data-emoji="[ziya]" alt="[龇牙]"></a>

                        <a data-emoji="[jingya]" alt="[惊讶]"></a>
                        <a data-emoji="[aoman]" alt="[傲慢]"></a>
                        <a data-emoji="[deyi]" alt="[得意]"></a>
                        <a data-emoji="[kelian]" alt="[可怜]"></a>
                        <a data-emoji="[baibai]" alt="[拜拜]"></a>
                        <a data-emoji="[kaixin]" alt="[开心]"></a>
                        <a data-emoji="[outu]" alt="[呕吐]"></a>
                    </div>
                    <div class="slider-slide">
                        <a data-emoji="[fendou]" alt="[奋斗]"></a>
                        <a data-emoji="[huaixiao]" alt="[坏笑]"></a>
                        <a data-emoji="[ganga]" alt="[尴尬]"></a>
                        <a data-emoji="[jingxia]" alt="[惊吓]"></a>
                        <a data-emoji="[dahaqian]" alt="[打哈欠]"></a>
                        <a data-emoji="[baiyan]" alt="[白眼]"></a>
                        <a data-emoji="[bishi]" alt="[鄙视]"></a>
                        
                        <a data-emoji="[chouyan]" alt="[抽烟]"></a>
                        <a data-emoji="[qiaotou]" alt="[敲头]"></a>
                        <a data-emoji="[qingqing]" alt="[亲亲]"></a>
                        <a data-emoji="[gongxi]" alt="[恭喜]"></a>
                        <a data-emoji="[jianxiao]" alt="[奸笑]"></a>
                        <a data-emoji="[maren]" alt="[骂人]"></a>
                        <a data-emoji="[qiu]" alt="[糗]"></a>

                        <a data-emoji="[shangxin]" alt="[伤心]"></a>
                        <a data-emoji="[shouweiqu]" alt="[受委屈]"></a>
                        <a data-emoji="[touxiao]" alt="[偷笑]"></a>
                        <a data-emoji="[wabikong]" alt="[挖鼻孔]"></a>
                        <a data-emoji="[weiqu]" alt="[委屈]"></a>
                        <a data-emoji="[wen]" alt="[问]"></a>
                        <a data-emoji="[cahan]" alt="[擦汗]"></a>
                    </div>
                    
                    <div class="slider-slide">
                        <a data-emoji="[zuohengheng]" alt="[左哼哼]"></a>
                        <a data-emoji="[youhengheng]" alt="[右哼哼]"></a>
                        <a data-emoji="[yun]" alt="[晕]"></a>
                        <a data-emoji="[daxiao]" alt="[大笑]"></a>
                        <a data-emoji="[xia]" alt="[吓]"></a>
                        <a data-emoji="[kun]" alt="[困]"></a>
                        <a data-emoji="[xu]" alt="[嘘]"></a>

                        <a data-emoji="[jiayou]" alt="[加油]"></a>
                        <a data-emoji="[qiang]" alt="[强]"></a>
                        <a data-emoji="[iloveyou]" alt="[我爱你]"></a>
                        <a data-emoji="[chajin]" alt="[差劲]"></a>
                        <a data-emoji="[no]" alt="[No]"></a>
                        <a data-emoji="[ok]" alt="[Ok]"></a>
                        <a data-emoji="[ruo]" alt="[弱]"></a>

                        <a data-emoji="[baoquan]" alt="[抱拳]"></a>
                        <a data-emoji="[woshou]" alt="[握手]"></a>
                        <a data-emoji="[yeah]" alt="[Yeah]"></a>
                        <a data-emoji="[lai]" alt="[来]"></a>
                        <a data-emoji="[zhutou]" alt="[猪头]"></a>
                        <a data-emoji="[xin]" alt="[心]"></a>
                        <a data-emoji="[xinsui]" alt="[心碎]"></a>
                    </div>
                    <div class="slider-slide">
                        <a data-emoji="[baobao]" alt="[抱抱]"></a>
                        <a data-emoji="[hongchun]" alt="[红唇]"></a>
                        <a data-emoji="[caidao]" alt="[菜刀]"></a>
                        <a data-emoji="[taiyang]" alt="[太阳]"></a>
                        <a data-emoji="[yewan]" alt="[夜晚]"></a>
                        <a data-emoji="[kulou]" alt="[骷髅]"></a>
                        <a data-emoji="[huaxiele]" alt="[花谢了]"></a>

                        <a data-emoji="[dangao]" alt="[蛋糕]"></a>
                        <a data-emoji="[kafei]" alt="[咖啡]"></a>
                        <a data-emoji="[zuqiu]" alt="[足球]"></a>
                        <a data-emoji="[kulou]" alt="[骷髅]"></a>
                        <a data-emoji="[xigua]" alt="[西瓜]"></a>
                        <a data-emoji="[zhadan]" alt="[炸弹]"></a>
                        <a data-emoji="[lanqiu]" alt="[篮球]"></a>

                        <a data-emoji="[liwu]" alt="[礼物]"></a>
                        <a data-emoji="[dabian]" alt="[大便]"></a>
                        <a data-emoji="[meigui]" alt="[玫瑰]"></a>
                        <a data-emoji="[mifan]" alt="[米饭]"></a>
                        <a data-emoji="[piaochong]" alt="[瓢虫]"></a>
                        <a data-emoji="[pijiu]" alt="[啤酒]"></a>
                        <a data-emoji="[shandian]" alt="[闪电]"></a>
                    </div>
                    </div>
                    <div class="slider-pagination"></div>
                </div>
                <figcaption>
                    <div class="input">
                        <textarea></textarea>
                        <pre><span></span><br/></pre>
                    </div>
                    <a class="button desaturate outline" href="javascript:sent()">发送</a>
                </figcaption>
            </figure>
            <div class="mask"></div>
        </footer>
    </section>
    
    <script src="../plugin/jquery/jquery.min.js"></script>
    <script src="../plugin/seedsui/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <script src="../plugin/exmobi/exmobi.js"></script>
    <!--禁止ios弹性-->
    <script src="../plugin/inobounce/inobounce.min.js"></script>
    <script>
        var r=Richinput("#richeditor");
        var richeditor=r.container;
        //发送消息
        function sent(){
            var chat=document.getElementById("chat");
            var textarea=document.querySelector("#richeditor textarea");
            var t=new Toast("输入内容不能为空");

            if(textarea.value==""){
                t.show();
                return;
            }
            richeditor.classList.remove("active");
            var html='<li class="even">'+
                '<div class="author">'+
                    '<img src="../img/list/photo.png" alt="Female">'+
                '</div>'+
                '<div class="content-box">'+
                    '<div class="content">'+
                        '<p>'+Emoji.parse(textarea.value)+'</p>'+
                    '</div>'+
                '</div>'+
            '</li>';
            $(chat).append(html);
            textarea.value="";
            scrollToBottom();
        }
        var article=document.querySelector("#page_chat article");
        function scrollToBottom(){
            article.scrollTop=article.scrollHeight;
        }
        //定义exmobi返回
        function back(){history.go(-1);}
    </script>
</body>
</html>